<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="搜索" :border-bottom="false"></u-navbar>
		<view class="ss-div u-m-t-10">
			<view class="ss-d flex">
				<u-input style="width: 100%;" v-model="keyword" />
				<view class="ss-btn" @click="task_id='',tosearch()">
					搜索
				</view>
			</view>
		</view>
		<view class="s-div">
			<view class="">
				<view class="flex flex_sb">
					<view class="s-title u-m-l-28 font_weight">
						热门搜索
					</view>
					<image @click="rsShow=!rsShow" class="del-icon" src="../../static/img/home/del-icon.png" mode="">
					</image>
				</view>
				<view class="flex flex_wrap u-m-t-30" >
					<view class="s-item-div" v-for="(item,index) in hotlist" :key="index" @click="task_id=item.tag_id,tosearch(item)">
						<view class="s-item line_1" >
							{{item.tag.name}}
						</view>
						<view class="del-i" v-if="rsShow" @click.stop="del(item)">
							<u-icon  name="close-circle" color="#333" size="28"></u-icon>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="li-div">
			<!-- <view class="li-item flex flex_sb" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
				<view class="">{{item.name}}</view>
				<view class="">
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
			</view> -->
			<view class="ls-div u-m-t-20">
				<view class="ls-item flex"  v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
					<view class="">
						<image class="zhu-img" :src="item.avatar" mode="aspectFill"></image>
						<view class="flex flex_cen u-m-t-12" v-if="item.is_online==1">
							<view class="yuan"></view>
							<view class="zx-s">在线</view>
						</view>
					</view>
					<view class="u-m-l-34" style="width: 100%;">
						<view class="flex flex_sb">
							<view class="flex">
								<view class="font_14_333 font_weight">
									{{item.name}}
								</view>
								<image class="u-m-l-8 h23" src="../../static/img/home/h23.png" mode=""></image>
								<view class="font_10_333 u-m-l-8">
									{{item.province}}
								</view>
							</view>
							<view class="flex">
								<image class="h24" src="../../static/img/home/h24.png" mode=""></image>
								<view class="pf-t">{{item.mark}}</view>
							</view>
						</view>
						<view class="flex u-m-t-16">
							
							<view v-if="index2<3" class="u-m-r-4 line_1" :class="index2<3?'bq'+(index2+1):'bq1'" v-for="(item2,index2) in item.task_arr" :key="index2">
								{{item2.name}}
							</view>
						</view>
						<view class="flex u-m-t-16">
							<view class="flex">
								<view class="">执业：</view>
								<view class="pf-t">{{item.license_date}}</view>
							</view>
							<view class="fw-d flex u-m-l-16 u-p-l-16">
								<view class="">服务：</view>
								<view class="pf-t">{{item.serve_num}}人</view>
							</view>
						</view>
					
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rsShow: false,

				keyword: '',
				hotlist: [],
				dataList: [],
				task_id:'',
				isSearch: false,
				
				total:0,
				pageNum:1,
				pageSize:20,
			}
		},
		onLoad() {
			this.products()
			this.getHotList()
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.products()
			}
		},
		methods: {
			getHotList() {
				this.$api({
					url: '/user/search',
					method: 'get',
					data: {
						type:1,
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.hotlist=res.data
					}
				})
			},
			tosearch() {
				this.pageNum = 1
				this.products()
			},
			products() {
				this.$api({
					url: '/user/look_lawyers',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						page:this.pageNum,
						limit:this.pageSize,
						keywords: this.keyword,
						task_id:this.task_id
					},
				}).then(res => {
					if (res.code == 1) {
						// this.isSearch = true
						// this.dataList = res.data.data
						
						this.total=res.data.total
						let data = res.data.data
						if (this.pageNum == 1) {
							this.dataList = data
						} else {
							this.dataList = [...this.dataList, ...data]
						}
					}
				})
			},
			toDetail(e) {
				uni.navigateTo({
					url: "/pages/lawyer/lawyerDetail?id=" + e.id
				})
			},
			del(e){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除吗',
					success: function(res) {
						if (res.confirm) {
							that.$api({
								url: '/user/del_search',
								method: 'post',
								data: {
									type:1,
									id:e.id,
									token: uni.getStorageSync("token"),
								},
							}).then(res => {
								if (res.code == 1) {
									that.getHotList()
								}
							})
						}
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.ss-div {
		padding: 28rpx 32rpx;
		background-color: #F5F5F6;

		.ss-d {
			width: 686rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding-left: 20rpx;
		}

		.ss-btn {
			width: 116rpx;
			height: 64rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 64rpx;
		}
	}

	.s-div {
		padding: 28rpx 13rpx;

		.s-title {
			font-size: 28rpx;
			color: #333333;
		}

		.del-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 28rpx;
		}
		.s-item-div{
			position: relative;
			
			.del-i {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				width: 24rpx;
				height: 24rpx;
				// background: #ADADAD;
				z-index: 25;
			}
		}
		.s-item {

			height: 48rpx;
			background: #F5F7F8;
			border-radius: 118rpx;
			padding: 0 20rpx;
			margin: 15rpx 15rpx;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #666666;

			

			
		}
	}

	.li-div {
		padding: 16rpx 32rpx;

		.li-item {
			width: 690rpx;
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 20rpx auto;
			padding: 0 30rpx;
		}
	}
	
	.ls-item{
		width: 686rpx;
		padding: 24rpx;
		background: #F5F5F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		
		.zhu-img{
			width: 136rpx;
			height: 168rpx;
			border-radius: 8rpx;
		}
		.yuan{
			width: 12rpx;
			height: 12rpx;
			background: #20C064;
			border-radius: 50%;
		}
		.h23{
			width: 24rpx;
			height: 20rpx;
		}
		.h24{
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
		.zx-s{
			font-size: 24rpx;
			color: #333333;
		}
		.pf-t{
			font-size: 20rpx;
			color: #FD8643;
		}
		.fw-d{
			border-left: 1px #999 solid;
		}
		.btn1{
			width: 196rpx;
			height: 56rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
		.btn2{
			font-size: 24rpx;
			color: #F81B19;
			text-align: center;
			line-height: 56rpx;
			width: 196rpx;
			height: 56rpx;
			background: #FFEBEB;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FF9D9D;
		}
	}
	.bq1 {
		font-size: 20rpx;
		color: #FF4A50;
		padding: 4rpx 6rpx;
		background: #F8EDED;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 8rpx;
	}
	
	.bq2 {
		font-size: 20rpx;
		color: #5385E3;
		padding: 4rpx 6rpx;
		background: #E5F3FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 8rpx;
	}
	
	.bq3 {
		font-size: 20rpx;
		color: #F7790D;
		padding: 4rpx 6rpx;
		background: #FFE8D3;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 8rpx;
	}
</style>